just tested it and it works

Thanks for looking into this and creating a decent PR! 👍

The only styling I'm concerned about is the height: 100% on the parent container. Is that needed?

Edit: Also, setting height on the video wrapper may break the ratio functionality. I'll do some testing though.

@sampotts Thanks for the quick response!

The height: 100% on both the parent and the wrapper seemed to be needed in my testing. Did you find otherwise?

I think it may also matter in which context users currently use Plyr. If they use it somewhere like a blog, the width: 100%; height: auto; might be a better choice (since blogs usually are vertically stacked). But for a full responsive experience, the height: 100% would work better IMO. If users want to constrain it to a specific size, they could just put the Plyr instance inside a container <div> of any size they want. We could retain backward compatibility by adding a responsive: boolean option in config, but I think most people would accept the new behavior as reasonable.

this is my testing. i use fancybox 3 with plyr in some of my pages and this is the results i get
before

after

@sampotts Why is height: 100%; removed from https://github.com/sampotts/plyr/blob/master/src/sass/base.scss

It was this pull request:
#1997

I'm guessing it needs reverting then?

@sampotts im not the expert but after they removed it, its is back to this issues

When I initially made this PR, the height: 100% was definitely required. From #1997 it sounds to me like a Bootstrap issue or some missing code on their end.

Could you try max-height: 100% on the .plyr element? Perhaps that's a happy medium.

@sampotts

but for vertical vids this happens

without max-height: 100%

with max-height: 100%

@sampotts it should be like this #1651 (comment)

@kgnfth Could you try adding max-height: 100% on both .plyr and .plyr-video-wrapper? You could also try adding an object-fit: contain on the latter.

@shravan2x same as above

you can try here https://tumbly.gocloud.fun/test/lolvideoslol

I think I have a solution that should fix both this issue and the other one. Working on another PR now.

@kgnfth Could you try shravan2x@c6376b6 #2022? If you aren't able to build Plyr entirely you could try making those changes in devtools directly. It's only a few fixes.

Thanks for working this out and sorry for the hassle 👍

@sampotts Least I could do after all the work you've put into this amazing MIT licensed repository 🙂

If that fix works, the PR is #2022